<style scoped lang="scss">
.app-container.home {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0;
}

.bigdata-statistic-row {
}

.bigData-card-panel {
  height: 100%; margin-top: 5px;  color: rgba(255, 255, 255, .9);
  .header { 
    background: rgba(255, 255, 255, .5);
    color: rgba(255, 255, 255, .8);
    height: 28px;
    line-height: 28px;
    border-radius: 6px;
    font-size: 14px;

    .el-col {
      text-align: center;
    }
  }

  .body {
    width: 100%;
    height: 100%;

    .el-row{
      margin: 2px 0;
      .el-col{
        font-size: 12px;
        text-align: center; color: rgba(255, 255, 255, 0.9);
      }
    }
  }
}

//
.temperature-machine-statistic {
  .item-circle {
    width: 100%;
    height: 50%;
    text-align: center;
    color: rgba(255, 255, 255, 0.8);
    padding-top: 20%;

    .border-danger {
      border: 8px solid rgba(253, 131, 111, 1);
    }
    .border-success {
      border: 8px solid rgba(43, 241, 236, 1);
    }

    .value {
      width: 50%;
      padding: 14% 0;
      border-radius: 50%;
      margin: 0 auto;
    }
    .label {
      height: 20px;
      line-height: 20px;
      font-size: 12px;
      margin-top: 5px;
    }
  }
}
</style>
<template>
  <div class="app-container home">
    <!-- 左侧菜单栏 -->
    <BigDataLeftMenu :menuId="'student'" />

    <!-- 体温安全指数 -->
    <SafetyIndex></SafetyIndex>

    <el-row
      class="bigdata-statistic-row"
      style="z-index: 10; margin: 45px 0 0 90px"
    >
      <el-col :span="8" style="z-index: 10">
        <BigDataCard0
          class="temperature-machine-statistic"
          :height="'380px'"
          :mainTitle="'学生体温统计'"
          :subTitle="'本周体温数据'"
        >
          <template slot="rectangleContent">
            <el-col
              :span="8"
              style="
                height: 100%;
                display: flex;
                display: flex;
                flex-flow: column;
                justify-content: center;
                align-items: center;
              "
            >
              <BigDataCircle
                :type="'danger'"
                :width="'120px'"
                :value="3"
                :label="'今日异常体温'"
              />
              <BigDataCircle
                :type="'primary'"
                :width="'120px'"
                :value="89900"
                :label="'今日体温检测'"
              />
            </el-col>
            <el-col :span="16" style="height: 100%">
              <StackedHorizontalBar />
            </el-col>
          </template>
        </BigDataCard0>
      </el-col>

      <el-col :span="10" style="height: 100%">
        <BigDataCard0 :height="'380px'">
          <template slot="rectangleContent">
            <div style="padding: 20px 10% 0 10%; color: rgba(255, 255, 255, .9); text-align: center;">
              <el-row style="font-size: 20px; font-weight: 600; text-align: left; padding-left: 20%;">学生总人数</el-row>
              <el-row style="font-size: 80px; font-weight: 1000;">138231</el-row>
              <el-row style="text-align: right; padding-right: 20%; font-size: 50px; font-weight: 600;">人</el-row>
            </div>
          </template>
        </BigDataCard0>
      </el-col>
    </el-row>

    <el-row class="bigdata-statistic-row" style="z-index: 10; position: absolute; left: 90px;
      top: 420px; bottom: 30px; right: 10px; overflow: hidden;">

      <!-- 异常体温人员记录表  -->
      <el-col :span="11" style="height: 100%;"> 
        <div style="height: 40px; line-height: 40px; color: rgba(255, 255, 255, .9); font-size: 16px; font-weight: 600;">
          异常体温人员记录表 
        </div>
        <el-row class=" bigData-card-panel" style=" height: 100%; padding-right: 5%; border-right: 1px solid #fff;">
          <div class="header">
            <el-col :span="5">日期</el-col>
            <el-col :span="7" style="text-align: left;">学校</el-col>
            <el-col :span="3">学生姓名</el-col>
            <el-col :span="3">体温</el-col>
            <el-col :span="6">家长</el-col>
          </div>
          <div class="body">
            <template v-for="(item, index) of studentsAbnormalList">
              <el-row :key="index">
                <el-col :span="5" style="overflow: hidden;white-space: nowrap;text-overflow:ellipsis;">{{parseTime(item.datetime, '{y}-{m}-{d} {h}:{i}:{s}')}}</el-col>
                <el-col :span="7" style="text-align: left; overflow: hidden;white-space: nowrap;text-overflow:ellipsis;">{{item.school}}</el-col>
                <el-col :span="3">{{item.name}}</el-col>
                <el-col :span="3">{{item.temperature}}</el-col>
                <el-col :span="6" style="text-align: right; overflow: hidden;white-space: nowrap;text-overflow:ellipsis;">{{item.parent}}
                  <i class="el-icon-phone"></i>
                  {{item.mobile}}</el-col>
              </el-row>
            </template>
          </div>
        </el-row>
      </el-col>

      <el-col :span="12" style="height: 100%;">
        <div style="height: 40px; padding-left: 5%; line-height: 40px; color: rgba(255, 255, 255, .9); font-size: 16px; font-weight: 600;">
          异常设备记录
        </div>
        <el-row class=" bigData-card-panel" style=" height: 100%; padding-left: 5%;">
          <div class="header">
            <el-col :span="5">设备码</el-col>
            <el-col :span="4" style="text-align: left;">学校名称</el-col>
            <el-col :span="4">班级</el-col>
            <el-col :span="5">掉线时间</el-col>
            <el-col :span="6">负责人</el-col>
          </div>
          <div class="body">
            <template v-for="(item, index) of machinesAbnormalList">
              <el-row :key="index">
                <el-col :span="5" style="text-align: left; overflow: hidden;white-space: nowrap;text-overflow:ellipsis;">{{item.code}}</el-col>
                <el-col :span="4">{{item.school}}</el-col>
                <el-col :span="4">{{item.class}}</el-col>
                <el-col :span="5" style="overflow: hidden;white-space: nowrap;text-overflow:ellipsis;">{{parseTime(item.datetime, '{y}-{m}-{d} {h}:{i}:{s}')}}</el-col>
                <el-col :span="6" style="text-align: right; overflow: hidden;white-space: nowrap;text-overflow:ellipsis;">{{item.manager}}
                  <i class="el-icon-phone"></i>
                  {{item.mobile}}
                </el-col>
              </el-row>
            </template>
          </div>
        </el-row>
      </el-col>
      
      

    </el-row>



  </div>
</template>

<script>
import BigDataLeftMenu from "@/views/bigData/components/LeftMenu-1.vue";
import SafetyIndex from "@/views/bigData/components/common/SafetyIndex.vue";
import BigDataCircle from "@/views/bigData/components/Circle-1.vue";

import BigDataCard0 from "@/views/bigData/components/Card-0.vue";
import BigDataCard from "@/views/bigData/components/Card-1.vue";

import StackedHorizontalBar from "@/views/dashboard/diy/StackedHorizontalBar.vue";

export default {
  name: "BigDataStudent",
  components: {
    BigDataLeftMenu,
    SafetyIndex,
    BigDataCircle,
    BigDataCard,
    BigDataCard0,
    StackedHorizontalBar,
  },
  data() {
    return {
      studentsAbnormalList: [
        { name: '张三丰', school: '寒亭外国语学校', temperature: '37.8°', datetime: '2021-12-12 08:00:00', parent: '张三', mobile: '13700889966' },
        { name: '张四丰', school: '双杨店镇初中', temperature: '38.8°', datetime: '2021-12-12 08:00:00', parent: '张四', mobile: '13700889966' },
        { name: '张五丰', school: '寒亭一中', temperature: '37.3°', datetime: '2021-12-12 08:00:00', parent: '张五', mobile: '13700889966' },
        { name: '张六丰', school: '寒亭河西小学', temperature: '37.6°', datetime: '2021-12-12 08:00:00', parent: '张六', mobile: '13700889966' },
        { name: '张七丰', school: '青州二中', temperature: '39.8°', datetime: '2021-12-12 08:00:00', parent: '张七', mobile: '13700889966' },
        { name: '张八丰', school: '西书院初中', temperature: '38.3°', datetime: '2021-12-12 08:00:00', parent: '张八', mobile: '13700889966' },
      ],
      machinesAbnormalList: [
        { code: 'MAC-ASDFLASDFASFD', school: '寒亭外国语学校', class: '一年级', datetime: '2021-12-12 08:00:00', manager: '张八', mobile: '13700889966' }, 
        { code: 'MAC-ASDFLASDFASFD', school: '旗城学校', class: '三年级', datetime: '2021-12-12 08:00:00', manager: '张八', mobile: '13700889966' }, 
      ],
    };
  },
  created() {},
  methods: {},
};
</script>



